<template>
<div>

        <div class="img-as" v-for="item in jingdian" :key="item.id">
                <div class="zou">
                    <img :src="item.img_path" />

                    <div class="lll">
                        
                            <div class="sp">
                            <span class="da">故宫博物馆(故宫)(5A)</span>
                            <span class="piao">票</span><span class="tao">套餐</span>
                            <span class="xian">线</span>
                             
                            </div>
                             <div class="xing">
                            <van-rate v-model="value" readonly color="#ffd21e" size="10px" />
                            <span class="fen">4.9分</span>
                            </div>

                            <div class="si">
                                    <span class="hong">¥20</span>
                                    <span class="qi">起</span>
                            </div>
                    </div>
                </div>
    
   
   
                <div class="right">
                    
                            <div class="ping">
                                   <div class="xiao">
                                    <span>163847人消费</span>
                                    </div>
                                    <div class="jia">
                                        <span>东城区</span>
                                    </div>
                            </div>

                </div>
        </div>
        
</div>
</template>

<script>
import Vue from 'vue';
import { Rate } from 'vant';

Vue.use(Rate);
export default {
  data() {
    return {
        jingdian:[],
         value: 4,
    };
  },
  methods: {},
  async mounted(){
    //   https://gitee.com/jiang_ha/zhucangku.git
      let url = "http://localhost:8080/data/jingdian.json"
      let res = await this.$axios.get(url)

      this.jingdian = res.data
      
  }
};


</script>

<style lang='scss'scoped>
.tooop{
    margin-top: 10px;
}
.fen{
    color: #ffd21e;
}
.img-as{
    margin-top: 10px;
    display: flex;
    justify-content:space-between;
}
.zou{
    display: flex;
    justify-content:flex-start ;
}
.lll{
    margin-left:20px;
    margin-top: 10px;
}

element.style {
    width: 106px;
    height: 82px;
}
img{
   width: 106px;
   height:82px;  
}
.jia{
        margin-top: 13px;
         padding-left: 39px
}

.piao{
    background-color: #4dc8f1;
     color: aliceblue;
    font-size: 10px;
}
.tao{
        background-color: #ff9400;
    color: aliceblue;
    font-size: 10px;
}
.xian{
        background-color: #bd82e3;
    color: aliceblue;
    font-size: 10px;
}
.ping{
    margin-top: 10px;
  font-size: 12px;
      margin-top: 18px;
}
.right{
    margin-right: 12px;
       
}
.sp>span{
     margin-left:4px ;
}
.xing{
    font-size:12px;
        padding-top: 12px;
}
.ooo{
    width: 100px;
    height:12px;
}
.hong{
    color: red;
    font-size: 17px;
}
.qi{
    font-size: 10px;
}
</style>
